//======================================================================数据逻辑
class Goods {
	constructor(goods) {
		this.goods = goods;
		this.chooesNum = 0;
	}
	//增加商品
	increse() {
		this.chooesNum++;
	}
	//减少商品
	decrese() {
		this.chooesNum--;
	}
	//总计
	getAmountPrice() {
		return this.chooesNum * this.goods.price
	}

}

class UiData {
	constructor() {
		const goodsList = [];
		goods.forEach(val => {
			const goods = new Goods(val);
			goodsList.push(goods)
		})
		this.goodsList = goodsList;
		//配送费
		this.freight = 5;
		//起送门槛
		this.freightThreshold = 30;
	}
	//总价
	getAllPrice() {
		let sumPrice = 0;
		this.goodsList.forEach(val => {
			sumPrice += val.getAmountPrice()
		})
		return sumPrice.toFixed(2)
	}
	//商品总数量
	getAllChooseNum() {
		let sumNum = 0;
		this.goodsList.forEach(val => {
			sumNum += val.chooesNum
		})
		return sumNum
	}
	//起送门槛
	getFreightThreshold() {
		return (this.freightThreshold - this.getAllPrice()).toFixed(2)
	}
	//是否跨过起送门槛
	isOverThreshold() {
		return this.getFreightThreshold() < 0
	}
	//增加某个商品
	increse(index) {
		this.goodsList[index].increse()
	}
	//减少某个商品
	decrese(index) {
		this.goodsList[index].decrese()
	}
}

//======================================================================界面逻辑
class UI {
	constructor() {
		this.uiData = new UiData();
		this.doms = {
			goodsList: document.querySelector(".goods-list"),
			carTotal: document.querySelector('.footer-car-total'),
			carTip: document.querySelector('.footer-car-tip'),
			footerPay: document.querySelector('.footer-pay'),
			footerCar: document.querySelector('.footer-car'),
			carDadge: document.querySelector('.footer-car-badge'),
		}
		//加入购物车动画结束坐标
		const rect = this.doms.footerCar.getBoundingClientRect()
		this.endPoint = {
			x: rect.x + rect.width / 2,
			y: rect.y + rect.height / 2
		}
		this.initPage()
		this.setListenEvent()
	}
	//设置全局监听
	setListenEvent(){
		this.doms.footerCar.addEventListener('animationend',function(){
			this.classList.remove('animate')
		})
	}
	//页面初始化
	initPage() {
		let html = "";
		this.uiData.goodsList.forEach((val,index) => {
			const goods = val.goods;
			html += `<div class="goods-item">
			  <img src="${goods.pic}" alt="" class="goods-pic" />
			  <div class="goods-info">
			    <h2 class="goods-title">${goods.title}</h2>
			    <p class="goods-desc">
						${goods.desc}
			    </p>
			    <p class="goods-sell">
			      <span>月售 ${goods.sellNumber}</span>
			      <span>好评率${goods.favorRate}%</span>
			    </p>
			    <div class="goods-confirm">
			      <p class="goods-price">
			        <span class="goods-price-unit">￥</span>
			        <span>${goods.price}</span>
			      </p>
			      <div class="goods-btns">
			        <i index="${index}" class="iconfont i-jianhao"></i>
			        <span>0</span>
			        <i index="${index}"class="iconfont i-jiajianzujianjiahao"></i>
			      </div>
			    </div>
			  </div>
			</div>`
		})
		this.doms.goodsList.innerHTML = html
	}
	//更新商品模块的页面状态
	refreshGoodsItem(index) {
		const itemDom = this.doms.goodsList.children[index]
		if (this.uiData.goodsList[index].chooesNum > 0) {
			itemDom.classList.add('active')
		} else {
			itemDom.classList.remove('active')
		}
		const spanDom = itemDom.querySelector(".goods-btns span")
		spanDom.textContent = this.uiData.goodsList[index].chooesNum;
	}
	//更新页脚的页面状态
	refreshFoodter() {
		if (this.uiData.getAllChooseNum() > 0) {
			this.doms.footerCar.classList.add('active')
		} else {
			this.doms.footerCar.classList.remove('active')
		}

		if (this.uiData.isOverThreshold()) {
			this.doms.footerPay.classList.add('active')
		} else {
			this.doms.footerPay.classList.remove('active')
		}
		//总价
		this.doms.carTotal.textContent = this.uiData.getAllPrice();
		//配送费
		this.doms.carTip.textContent = `配送费￥${this.uiData.freight}`;
		//门槛金额
		const span = this.doms.footerPay.querySelector('span')
		span.textContent = `还差￥${this.uiData.getFreightThreshold()}元起送`
		//所选商品总数
		this.doms.carDadge.textContent = this.uiData.getAllChooseNum()
	}
	//添加某个商品的数量
	increse(index) {
		this.uiData.increse(index);
		this.refreshGoodsItem(index);
		this.refreshFoodter()
		this.addIncnJump(index)
	}
	//减少某个商品的数量
	decrese(index) {
		this.uiData.decrese(index);
		this.refreshGoodsItem(index);
		this.refreshFoodter()
	}
	//购物车动画弹跳
	carAnimate(){
		this.doms.footerCar.classList.add('animate');
	}
	
	//添加商品时加号动画
	addIncnJump(index) {
		//创建jump对象
		const div = document.createElement('div')
		div.className = "add-to-car";
		const i = document.createElement('i');
		i.className = 'iconfont i-jiajianzujianjiahao';
		//初始化jump对象设置
		const itemDom = this.doms.goodsList.children[index];
		const addIcon = itemDom.querySelector('.i-jiajianzujianjiahao');
		//获取dom元素的所有属性
		const rect = addIcon.getBoundingClientRect();
		//设置跳跃的起始位置
		const starPoint = {
			x: rect.x + rect.width / 2,
			y: rect.y + rect.height / 2
		}
		div.style.transform = `translateX(${starPoint.x}px)`;
		i.style.transform = `translateY(${starPoint.y}px)`;
		//设置初始位置之后再挂载
		div.appendChild(i)
		document.body.appendChild(div)
		//强行渲染
		div.clientHeight;
		//设置跳跃的终点位置
		div.style.transform = `translateX(${this.endPoint.x}px)`
		i.style.transform = `translateY(${this.endPoint.y}px)`
		
		const _that = this;
		div.addEventListener('transitionend',function(){
			div.remove()
			_that.carAnimate()
		})
	}
}

//======================================================================事件逻辑
const ui = new UI();
ui.doms.goodsList.addEventListener('click',function(e){
	//获取索引并强制转换
	const index = +e.target.getAttribute('index')
	if(e.target.classList.contains('i-jiajianzujianjiahao')){
		ui.increse(index)
	}else if(e.target.classList.contains('i-jianhao')){
		ui.decrese(index)
	}
})
